<template>
    <view>
        <view class="wallet">
            <view class="wallet_bg">
                <view class="wallet_egp"> {{ info.unlock || "0.00" }}Egp </view>
                <text>Balance</text>
                <view class="wallet_num">
                    <view class="num_item">
                        <p>{{ info.unlock || "0.00" }}Egp</p>
                        <text>To be withdrawn</text>
                    </view>
                    <view class="num_item">
                        <p>{{ info.pickuped || "0.00" }}Egp</p>
                        <text>Withdrawn</text>
                    </view>
                </view>
            </view>
            <view class="wallet_record" v-if="list.length > 0">
                <p>Withdrawal records</p>
                <ul>
                    <li v-for="(item, index) in list" :key="index">
                        <dl>
                            <dt>
                                <image
                                    src="/static/business/money.png"
                                    mode=""
                                ></image>
                            </dt>
                            <dd>
                                <p>
                                    {{ item.money || "0.00" }}Egp
                                    <text class="status pedding"
                                        >Pending Review</text
                                    >
                                    <!-- Transferred -->
                                </p>
                                <view class="account"
                                    >Reflect Account：6210 0000 0000</view
                                >
                                <text>{{ item.ctime }}</text>
                            </dd>
                        </dl>
                    </li>
                </ul>
                <u-loadmore v-if="hasMore" :status="loadStatus" />
            </view>
        </view>
        <bottomBtn text="Apply for withdrawal" @clickFun="goWithdrawal" />
    </view>
</template>

<script>
import { getWalletInfo, getPickuped } from "@/lib/business.js";
import { showFailure } from "@/lib/helper";
export default {
    data() {
        return {
            info: {},
            list: [{ money: "1000.00", ctime: "2023-08-01 10:00:00" }],
            loadStatus: "loadmore",
            pageNo: 1,
            pageSize: 10,
            hasMore: false,
        };
    },
    onLoad() {
        this.handleInfo();
        this.loadData(true);
    },
    onReachBottom() {
        if (this.hasMore) {
            this.pageNo = this.pageNo + 1;
            this.loadData();
        }
    },
    methods: {
        handleInfo() {
            getWalletInfo().then((res) => {
                this.info = res.data;
            });
        },
        loadData(isReset) {
            let _this = this;
            this.loadStatus = "loading";
            let obj = {
                pageNo: _this.pageNo,
                pageSize: _this.pageSize,
            };
            getPickuped(obj)
                .then((res) => {
                    uni.hideLoading();
                    this.loadStatus = "no-more";
                    this.hasMore = res.data.hasMore;
                    if (isReset) {
                        this.list = res.data.records;
                    } else {
                        this.list = this.list.concat(res.data.records);
                    }
                })
                .catch((res) => {
                    this.loadStatus = "no-more";
                    uni.hideLoading();
                    showFailure();
                });
        },
        goWithdrawal() {
            uni.navigateTo({
                url: "/pages/user/merchant/withdrawal",
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.wallet {
    padding: 36rpx 36rpx 160rpx;

    .wallet_bg {
        width: 100%;
        height: 384rpx;
        background: url("@/static/business/wallet_bg.png") no-repeat;
        background-size: 100% 100%;
        color: #fff;

        .wallet_egp {
            padding-top: 68rpx;
            font-family: Manrope, Manrope;
            font-weight: 800;
            font-size: 52rpx;
            padding-left: 32rpx;
        }

        > text {
            display: block;
            font-family: Manrope, Manrope;
            font-weight: 400;
            font-size: 28rpx;
            padding-left: 32rpx;
            padding-top: 8rpx;
        }

        .wallet_num {
            padding-top: 54rpx;
            display: flex;
            align-items: center;
            justify-content: space-around;

            .num_item {
                text-align: center;

                > p {
                    font-family: Manrope, Manrope;
                    font-weight: 800;
                    font-size: 36rpx;
                }

                > text {
                    font-family: Manrope, Manrope;
                    font-weight: 400;
                    font-size: 24rpx;
                }
            }
        }
    }

    .wallet_record {
        margin-top: 54rpx;
        .account {
            font-size: 26rpx;
            color: #888888;
            // line-height: 42rpx;
        }

        > p {
            font-weight: bold;
            font-size: 32rpx;
            color: #1c120d;
        }

        ul {
            li {
                margin-top: 32rpx;
                display: flex;
                align-items: center;
                justify-content: space-between;
                width: 100%;
                display: block;

                dl {
                    display: flex;

                    dt {
                        width: 96rpx;
                        height: 96rpx;
                        background: #f5ede5;
                        border-radius: 16rpx;
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        image {
                            width: 48rpx;
                            height: 56rpx;
                        }
                    }

                    dd {
                        padding-left: 32rpx;
                        flex: 1;
                        width: calc(100% - 128rpx);

                        > p {
                            font-family: Manrope, Manrope;
                            font-weight: 800;
                            font-size: 32rpx;
                            color: #1c120d;
                            display: flex;
                            justify-content: space-between;
                            .status {
                                font-weight: 400;
                                font-size: 28rpx;
                                color: #1c120d;
                            }
                            .status.pedding {
                                color: #fc721a;
                            }
                        }

                        > text {
                            font-family: Manrope, Manrope;
                            font-weight: 400;
                            font-size: 24rpx;
                            color: #a7a7a7;
                        }
                    }
                }

                > text {
                    font-family: Manrope, Manrope;
                    font-weight: 400;
                    font-size: 24rpx;
                    color: #1c120d;
                }
            }
        }
    }
}
</style>
